<template>
  <div class="rolePage">
    <el-button class="addBtn" type="primary" icon="el-icon-plus" @click="addUserRole()">新增用户</el-button>
    <div class="roleTable">
      <el-table
        class="list"
        :data="userList"
        height="25.1vw"
        style="width: 100%"
        :row-style="{
          height: '3.475vw',
        }"
        :header-cell-style="{
          background: '#F6F8F9 ',
          height: '3.475vw',
          color: '#000000',
        }"
      >
        <el-table-column label="序号">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名">
          <template slot-scope="scope">
            <span>{{ scope.row.userName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="手机号">
          <template slot-scope="scope">
            <span>{{ scope.row.phone }}</span>
          </template>
        </el-table-column>
        <el-table-column label="权限">
          <template slot-scope="scope">
            <span>{{ scope.row.roleName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-popconfirm
              title="确定删除吗？"
              @confirm="delUserById(scope.row.userId)"
            >
              <el-button
                size="mini"
                type="danger"
                slot="reference"
                style="margin-left: -0.8vw"
                >删除</el-button
              >
            </el-popconfirm>
            <el-button
              size="mini"
              slot="reference"
              @click="openDetail(scope.row)"
              style="margin-left: 0.8vw"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getUserPageApi, delUserByIdApi } from '@/api/user'
export default {
  name: 'SevencolorUserIndex',

  data () {
    return {
      userList: [],
      params: {
        current: 1,
        pageSize: 8,
        baseId: 1
      }
    }
  },

  mounted () {
    this.params.baseId = this.$store.getters.userInfo.baseId
    this.getUserPage()
  },

  methods: {
    // 添加
    async getUserPage () {
      const res = await getUserPageApi(this.params)
      console.log(res)
      this.userList = res.data.records
    },
    // 删除
    async delUserById (id) {
      const res = await delUserByIdApi(id)
      if (res.code === 200) {
        this.$message('删除成功')
      }
    },
    // 编辑
    openDetail (userInfo) {
      this.$router.push({
        path: '/shuzhongtian/agriRoleAdd',
        query: userInfo
      })
    },
    addUserRole () {
      this.$router.push({
        path: '/shuzhongtian/agriRoleAdd'
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.rolePage {
  width: 80.2083vw;
  height: 35.4167vw * 0.834;
  background: #ffffff;
  border-radius: 20px 20px 20px 20px;
  padding: 1.0417vw;
  .addBtn {
    text-align: right;
  }
  .roleTable {
    margin-top: 1.0417vw*0.834;
  }
}
</style>
